<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .layui-badge-rim + .layui-badge-rim {
            margin-left: 5px;
        }

        #inline1 {
            position: absolute;
            right: 5px;
        }


        .layui-input-block {
            margin-left: 130px;
        }

        #imgdiv {
            width: 150px;
            height: 150px;
            border: 2px dashed #000;
        }

        .mylable1 {
            width: 80%;
        }

        .mylable2 {
            width: 18%;
        }

        #activityCarouselDiv .layui-table-cell {
            line-height: 50px;
            height: 50px;
        }

        /*.layui-table-cell{height:66px;line-height: 66px;}*/
    </style>
</head>
<body>
<div style=";margin-top: 20px;margin-left: 20px" id="activityCarouselDiv">

    <!--    <div class="layui-inline">-->
    <!--        <button id="carouselBtnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索-->
    <!--        </button>-->
    <!--        &lt;!&ndash;                        <button id="refresh" class="layui-btn icon-btn"><i class="layui-icon">&#xe9aa;</i></button>&ndash;&gt;-->
    <!--    </div>-->
    <div class="layui-input-inline" style=" float: right;margin-right: 10%;">
        <button id="activityCarouselBtnAdd" class="layui-btn icon-btn layui-btn-normal"><i class="layui-icon">&#xe654;</i>添加
        </button>
    </div>
    <table class="layui-table" id="activityCarouselTable" lay-filter="activityCarouselTable"></table>

    <input type="file" id="defaultFile" hidden="hidden" disabled>
</div>
<script th:replace="/common/template :: script"></script>
<!-- 表格操作列 -->
<script type="text/html" id="activityCarouselTableBar">
    <a class="layui-btn layui-btn-sm" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</a>
</script>
<!--表格图片展示按钮列-->
<script type="text/html" id="imgtmp">
    <button type="button" class="layui-btn layui-btn-xs " lay-event="viewImage">
        <i class="layui-icon">&#xe64a;</i> 点击查看图片
    </button>
</script>

<script type="text/html" id="activityCarouselSelectShopEdit">
    <a class="layui-btn layui-btn-xs" lay-event="activityCarouselSelectedShop" id="activityCarouselSelectedShop">选择</a>
</script>
<script type="text/html" id="activityCarouselIntegralMallServiceEdit">
    <a class="layui-btn layui-btn-xs" lay-event="activityCarouselSelectedIntegralMallService"
       id="activityCarouselSelectedIntegralMallService">选择</a>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="activityCarouselForm">
    <form lay-filter="activityCarouselForm" class="layui-form model-form" id="demoForm" style="padding: 20px">
        <input name="carouselId" id="carouselId" type="text" hidden/>
        <div class="layui-form-item">
            <label class="layui-form-label">轮播图类型:</label>
            <div class="layui-input-block">
                <select id="carouselType" lay-filter="carouselType">
                    <option value="0" selected>无关联</option>
                    <option value="1">关联店铺</option>
                    <option value="2">关联商品</option>
                    <option value="3">关联链接</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">排序优先值:</label>
            <div class="layui-input-block">
                <input style="height: auto;line-height: 38px" id="sort" name="sort" placeholder="请输入排序优先值" type="number"
                       class="layui-input" lay-verify="required"
                       required/>
            </div>
        </div>
        <div class="layui-form-item" id="relation" hidden="hidden">
            <label class="layui-form-label required">关联内容:</label>
            <div class="layui-input-block">
                <input hidden name="contentId" id="contentId" type="text"
                />
                <input style="float: left;margin-right: 20px" name="content" id="content" placeholder="关联内容" type="text"
                       disabled="disabled" class="layui-input"/>
                <div id="relationShop" hidden="hidden">
                    <button type="button" id="selectRelationShop" class="layui-btn layui-btn-normal">选择关联店铺</button>
                </div>
                <div id="relationService" hidden="hidden">
                    <button type="button" id="selectRelationService" class="layui-btn layui-btn-normal">选择关联商品</button>
                </div>
                <div id="relationAddress" hidden="hidden">
                    <!--                    <input name="address" placeholder="请输入关联地址" type="text" class="layui-input"/>-->
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">
                图片上传:
            </label>
            <div class="layui-input-inline" style="margin-left: 3%">
                <input id="fileUpload" type="file" style="display:none" name="file" accept="image/*"/>
                <div id="imgdiv">
                    <img id="uploadImg" class="img" style="width: 150px;height: 150px"/>
                </div>
            </div>
            <div>
                <span> 操作：</span>
                <br/>
                <br/>
                <button id="uploads" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" type="button">上传
                </button>
                <br/>
                <br/>
                <button id="removes" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" type="button">移除
                </button>
                <br/>
                <br/>
                <button id="preview" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" type="button">预览
                </button>
            </div>
        </div>
        <!--        <div class="layui-form-item">-->
        <!--            <div class="layui-input-block">-->
        <!--                <span style="font-size: 12px ; color: #9e6dff">-->
        <!--                    图片上传要求-->
        <!--                    长宽：宽小于900 , 高小于500<br/>-->
        <!--                    大小：不大于3m<br/>-->
        <!--                    格式：.png,.jpg<br/>-->
        <!--                </span>-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="layui-form-item text-center" style="text-align: center;">
            <button class="layui-btn" lay-filter="activityCarouselFormSubmit" lay-submit style="margin-right: 20px;">保存</button>
            <button class="layui-btn layui-btn-primary" type="button" id="closeBtn" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<script type="text/html" id="activityCarouselShop">
    <div class="layui-tab-content">
        <div class="layui-input-inline" style="width: 300px;margin-right: 30px">
            <input type="text" id="activityCarouselReviewedAdoptSearchName" placeholder="请输入店铺名称" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="submit" class="layui-btn" id="activityCarouselReviewedAdoptSearch">搜索</button>
        </div>
        <table class="layui-hide" id="activityCarouselReviewedAuditShopTable"
               lay-filter="activityCarouselReviewedAuditShopTable"></table>
    </div>
</script>
<script type="text/html" id="activityCarouselIntegralMall">
    <div class="layui-tab-content">
        <div class="layui-input-inline" style="width: 300px;margin-right: 30px">
            <input type="text" id="activityCarouselIntegralMallServiceName" placeholder="请输入店铺名称" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="submit" class="layui-btn" id="activityCarouselIntegralMallServiceSearch">搜索</button>
        </div>
        <table class="layui-hide" id="activityCarouselIntegralMallServiceTable"
               lay-filter="activityCarouselIntegralMallServiceTable"></table>
    </div>
</script>
<script th:inline="javascript">
    layui.use(['layer', 'form', 'table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var selectValue = 0;


        table.render({
            elem: '#activityCarouselTable'
            , url: '/activityCarousel'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                 {
                    field: 'hrContentType', title: '类型', align: 'center', templet: function (d) {
                        var str = '';
                        var hrContentType = d.hrContentType;
                        if (hrContentType == 0) {
                            str = "<div>无关联</div>"
                        } else if (hrContentType == 1) {
                            str = "<div>关联店铺</div>"
                        } else if (hrContentType == 2) {
                            str = "<div>关联商品</div>"
                        } else if (hrContentType == 3) {
                            str = "<div>关联地址</div>"
                        }
                        return str;
                    }
                } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {
                    field: 'hrAddress', title: '图片', align: 'center', templet: function (d) {
                        return "<img style='cursor: pointer' class='tableImg' src='" + d.hrAddress + "'>"
                    }
                }
                , {field: 'igOrder', title: '排序值', align: 'center'}
                , {field: 'hrCreateDate', title: '创建时间', align: 'center'}
                , {title: '操作', align: 'center', toolbar: '#activityCarouselTableBar'}
            ]]
        });
        //修改
        table.on('tool(activityCarouselTable)', function (obj) {
            if (obj.event === 'edit') {
                showEditModel(obj.data);
            } else if (obj.event === 'del') {
                del(obj);
            }
        })

        function del(obj) {
            var y = $(window).height()-window.screen.height/2;
            layer.confirm('确定要删除吗？', {
                offset: y,
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                $.ajax({
                    url: '/carousel/' + obj.data.hrId,
                    method: 'Post',
                    data: {_method: 'DELETE'},
                    success: function (res) {
                        layer.closeAll('loading');
                        if (res.code == 200) {
                            layer.msg(res.msg, {icon: 1});
                            obj.del();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                })
            });
        }

        $('#activityCarouselDiv').on('click', '.tableImg', function () {
            var src = $(this).attr("src");
            if (src && src != '') {
                var img = new Image();
                img.src = src;
                var height = img.height + 50; //获取图片高度
                var width = img.width; //获取图片宽度
                // var imgHtml = "<img style='max-width: 100%;max-height: 100%'  src='" + obj.src + "' />";
                var imgHtml = "<img src='" + src + "' />";
                layer.open({
                    type: 1,
                    shade: true,
                    title: false, //不显示标题
                    // shade: 0.8,
                    // offset: 'auto',
                    area: ['90%', '90%'],
                    // area:['auto','auto'],
                    shadeClose: true,//点击外围关闭弹窗
                    scrollbar: false,//不现实滚动条
                    content: imgHtml
                })
            }
        })
        // 添加按钮点击事件
        $('#activityCarouselBtnAdd').click(function () {
            showEditModel();
        });

        // 显示表单弹窗
        function showEditModel(data) {
            var index = layer.open({
                type: 1,
                title: (data ? '修改' : '添加') + '轮播图',
                area: '600px',
                content: $('#activityCarouselForm').html(),
                success: function () {
                    selectValue = 0;
                    var fileImg;
                    $('#preview').click(function () {
                        var obj = document.getElementById('uploadImg');
                        if (obj.src && obj.src != '') {
                            var img = new Image();
                            img.src = obj.src;
                            var height = img.height + 50; //获取图片高度
                            var width = img.width; //获取图片宽度
                            // var imgHtml = "<img style='max-width: 100%;max-height: 100%'  src='" + obj.src + "' />";
                            var imgHtml = "<img src='" + obj.src + "' />";
                            layer.open({
                                type: 1,
                                shade: true,
                                title: false, //不显示标题
                                // shade: 0.8,
                                // offset: 'auto',
                                area: ['80%', '80%'],
                                // area:['auto','auto'],
                                shadeClose: true,//点击外围关闭弹窗
                                scrollbar: false,//不现实滚动条
                                content: imgHtml
                            })
                        }
                    })
                    var interimPath = '';
                    $('#uploads').click(function () {
                        $(".img").show();
                        return $('#demoForm [type="file"]').click(); //注意这句，主要是需要return点击事件返回值
                    });
                    $('#removes').click(function () {
                        fileImg = null;
                        //清空文件上传
                        var file = document.getElementById('fileUpload');
                        file.value = '';
                        $(".img").removeAttr("src");
                        $(".img").hide();
                    });
                    //图片验证
                    $("#fileUpload").change(function () {
                        var fileTypes = [".jpg", ".png"];  //我们所需要的图片格式
                        var filePath = this.value;
                        if (filePath) {
                            var filePic = this.files[0];            //选择的文件内容--图片
                            var fileType = filePath.slice(filePath.lastIndexOf("."));   //选择文件的格式
                            var fileSize = this.files[0].size;            //选择文件的大
                            if (fileTypes.indexOf(fileType) == -1) {  //判断文件格式是否符合要求
                                $('#removes').click();
                                layer.msg("文件格式不符合要求！");
                                return
                            }
                            var reader = new FileReader();
                            reader.readAsDataURL(filePic);
                            reader.onload = function (e) {
                                var data = e.target.result;
                                //加载图片获取图片真实宽度和高度
                                var image = new Image();
                                image.src = data;
                                fileImg = filePic;
                            };
                        } else {
                            return;
                        }

                    })
                    form.val('carouselForm', data);
                    //图片回显事件
                    $('#demoForm [type="file"]').change(function () {
                        interimPath = URL.createObjectURL($(this)[0].files[0]);
                        $(".img").attr("src", URL.createObjectURL($(this)[0].files[0]));
                    });
                    form.render('select');
                    $('#selectRelationShop').click(function () {
                        loadShopTable();
                    })
                    $('#selectRelationService').click(function () {
                        loadIntegralMall();
                    })


                    if (data) {
                        $('#carouselId').val(data.hrId)
                        fileImg = new File([document.getElementById("defaultFile").files[0]], "default");
                        $('#sort').val(data.igOrder);
                        $('#carouselType').val(data.hrContentType);
                        // selectValue = data.hrContentType;
                        carouselTypeSelectChange(data.hrContentType, data.hrContent);
                        $('#uploadImg').attr("src", data.hrAddress);
                    }
                    //更新全部
                    form.on('submit(activityCarouselFormSubmit)', function (d) {
                        if (selectValue != 0 && $('#content').val() == '') {
                            layer.msg("关联内容不能为空", {icon: 2});
                            return false;
                        }
                        if (fileImg == null || fileImg == undefined) {
                            layer.msg("请上传图片", {icon: 2});
                            return false;
                        }
                        var form = new FormData();
                        form.append("igOrder", $('#sort').val())
                        if (selectValue != 3) {
                            form.append("hrContent", $('#contentId').val())
                        } else {
                            form.append("hrContent", $('#content').val())
                        }
                        form.append("file", fileImg);
                        form.append("hrId", $('#carouselId').val());
                        form.append("hrContentType", selectValue);
                        layer.load(2);
                        $.ajax({
                            url: '/activityCarousel',
                            method: data ? 'Put' : 'Post',
                            data: form,
                            // 告诉jQuery不要去处理发送的数据
                            processData: false,
                            // 告诉jQuery不要去设置Content-Type请求头
                            contentType: false,
                            success: function (res) {
                                layer.closeAll();
                                if (res.code == 200) {
                                    layer.msg(res.msg, {icon: 1});
                                    table.reload('activityCarouselTable')
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        })
                        return false;
                    });

                    $('#closeBtn').click(function () {
                        layer.close(index);
                    })
                }
            })
        }

        form.on('select(carouselType)', function (data) {
            carouselTypeSelectChange(data.value);
        });


        function carouselTypeSelectChange(value, contentId) {
            if (selectValue != value) {
                $('#content').val('');
                $('#contentId').val('');
                $('#content').css('width', '100%');
                $('#relationShop').hide();
                $('#relationService').hide();
                $('#content').attr('disabled', 'disabled');
                $('#content').attr('placeholder', '关联内容')
                if (value == 0) {
                    $('#relation').hide();
                } else if (value == 1) {
                    $('#content').css('width', '50%')
                    $('#relation').show();
                    $('#relationShop').show();
                    if (contentId != null) {
                        $.ajax({
                            url: '/useRules/shopId/' + contentId,
                            method: 'get',
                            success: function (res) {
                                $('#contentId').val(contentId);
                                $('#content').val(res.shopName);
                                selectValue = value
                                var select = 'dd[lay-value=' + value + ']';
                                $('#carouselType').siblings("div.layui-form-select").find('dl').find(select).click();
                            }
                        })
                    }
                } else if (value == 2) {
                    $('#content').css('width', '50%')
                    $('#relation').show();
                    $('#relationService').show();
                    if (contentId != null) {
                        $.ajax({
                            url: '/integralMall/getNameById/' + contentId,
                            method: 'get',
                            success: function (res) {
                                $('#contentId').val(contentId);
                                $('#content').val(res.imgName);
                                selectValue = value
                                var select = 'dd[lay-value=' + value + ']';
                                $('#carouselType').siblings("div.layui-form-select").find('dl').find(select).click();
                            }
                        })
                    }
                } else if (value == 3) {
                    $('#relation').show();
                    $('#content').attr('placeholder', '请输入关联地址')
                    $('#content').removeAttr('disabled')
                    if (contentId != null) {
                        $('#content').val(contentId);
                        selectValue = value
                        var select = 'dd[lay-value=' + value + ']';
                        $('#carouselType').siblings("div.layui-form-select").find('dl').find(select).click();
                    }
                }
            }
            selectValue = value;
        }
        function loadShopTable() {
            var index = layer.open({
                type: 1,
                area: ['60%', '80%'],
                maxmin: true,
                title: '选择店铺',
                content: $('#activityCarouselShop').html(),
                success: function () {
                    table.render({
                        elem: '#activityCarouselReviewedAuditShopTable'
                        , url: '/shopReviewed/getReviewedAudit/'
                        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        , cols: [[
                            {type: 'checkbox'}
                            , {field: 'shopName', title: '实体店名称', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                            , {field: 'shopTypeName', title: '店铺类型', align: 'center'}
                            , {field: 'contactsName', title: '联系人姓名', align: 'center'}
                            , {field: 'edit', title: '操作', align: 'center', toolbar: '#activityCarouselSelectShopEdit'}
                        ]]
                        , page: true
                    });

                    //审核成功的搜索
                    $('#activityCarouselReviewedAdoptSearch').click(function () {
                        var searchName = $('#activityCarouselReviewedAdoptSearchName').val();
                        table.reload('activityCarouselReviewedAuditShopTable', {where: {searchName: searchName}})
                    })

                    table.on('tool(activityCarouselReviewedAuditShopTable)', function (obj) {
                        if (obj.event === 'activityCarouselSelectedShop') {
                            $('#contentId').val(obj.data.shopId);
                            $('#content').val(obj.data.shopName);
                            layer.close(index);
                        }
                    })
                }
            })
        }

        function loadIntegralMall() {
            var index = layer.open({
                type: 1,
                area: ['60%', '80%'],
                maxmin: true,
                title: '选择商品',
                content: $('#activityCarouselIntegralMall').html(),
                success: function () {
                    table.render({
                        elem: '#activityCarouselIntegralMallServiceTable'
                        , url: '/integralMall'
                        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        , cols: [[
                            {type: 'checkbox'}
                            , {field: 'serviceName', title: '服务名称', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                            , {field: 'serviceTypeName', title: '服务类型', align: 'center'}
                            , {field: 'integral', title: '所需积分', align: 'center'}
                            , {title: '操作', align: 'center', toolbar: '#activityCarouselIntegralMallServiceEdit'}
                        ]]
                        , page: true
                    });
                    //商品搜索
                    $('#activityCarouselIntegralMallServiceSearch').click(function () {
                        var searchName = $('#activityCarouselIntegralMallServiceName').val();
                        table.reload('activityCarouselIntegralMallServiceTable', {where: {searchName: searchName}})
                    })

                    table.on('tool(activityCarouselIntegralMallServiceTable)', function (obj) {
                        if (obj.event === 'activityCarouselSelectedIntegralMallService') {
                            $('#contentId').val(obj.data.imsId);
                            $('#content').val(obj.data.serviceName);
                            layer.close(index);
                        }
                    })
                }
            })
        }
    })
</script>

</body>
</html>
